<script setup>
import { ref } from 'vue';
import ProductItem from "@/views/ProductList/components/ProductItem.vue";

const brands = ref([
  { name: '不限', href: '#', isCurrent: true },
  { name: '大众', href: '#', isCurrent: false },
  { name: '宝马', href: '#', isCurrent: false },

]);

const prices = ref([
  { name: '不限', href: '#', isCurrent: false },
  { name: '8万以下', href: '#', isCurrent: true },
  { name: '21万以下', href: '#', isCurrent: false },

]);

// 商品内容
const products = ref([
  {
    name: '奥迪 奥迪A3 2014款 40TFSI',
    price: 260000,
    brand: '奥迪',
    image: '/src/assets/img/p5.jpg',
    url: '#'
  },
  {
    name: '宝马 宝马3系 2016款 320Li',
    price: 300000,
    brand: '宝马',
    image: '/src/assets/img/p1.jpg',
    url: '#'
  },
  {
    name: '本田 本田CR-V 2018款 240Turbo',
    price: 220000,
    brand: '本田',
    image: '/src/assets/img/p2.jpg',
    url: '#'
  },
  {
    name: '本田 本田CR-V 2018款 240Turbo',
    price: 220000,
    brand: '本田',
    image: '/src/assets/img/p3.jpg',
    url: '#'
  },
  {
    name: '本田 本田CR-V 2018款 240Turbo',
    price: 220000,
    brand: '本田',
    image: '/src/assets/img/p4.jpg',
    url: '#'
  },
  {
    name: '本田 本田CR-V 2018款 240Turbo',
    price: 220000,
    brand: '本田',
    image: '/src/assets/img/p6.jpg',
    url: '#'
  },
  {
    name: '本田 本田CR-V 2018款 240Turbo',
    price: 220000,
    brand: '本田',
    image: '/src/assets/img/p7.jpg',
    url: '#'
  },
  {
    name: '本田 本田CR-V 2018款 240Turbo',
    price: 220000,
    brand: '本田',
    image: '/src/assets/img/p8.jpg',
    url: '#'
  },
  {
    name: '本田 本田CR-V 2018款 240Turbo',
    price: 220000,
    brand: '本田',
    image: '/src/assets/img/p9.jpg',
    url: '#'
  },
  {
    name: '本田 本田CR-V 2018款 240Turbo',
    price: 220000,
    brand: '本田',
    image: '/src/assets/img/p10.jpg',
    url: '#'
  },
]);
</script>

<template>
  <div class="searcharea layout">
<!--    element面包屑导航-->
    <div class="curpostion">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item><a href="/">新车上市</a></el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <dl>
      <dt>筛选条件：</dt>
      <dd>
        <h5>品牌：</h5>
        <ul>
          <li v-for="brand in brands" :key="brand.id" :class="{ cur: brand.isCurrent }">
            <a :href="brand.href">{{ brand.name }}</a>
          </li>
        </ul>
      </dd>
      <dd>
        <h5>价格：</h5>
        <ul>
          <li v-for="price in prices" :key="price.id" :class="{ cur: price.isCurrent }">
            <a :href="price.href">{{ price.name }}</a>
          </li>
        </ul>
      </dd>
    </dl>
  </div>
<!--  <div class="searcharea layout">-->
<!--    <div class="curpostion"><a href="#">首页</a><span>&gt;</span><a href="#">汽车列表</a></div>-->
<!--    <dl>-->
<!--      <dt>筛选条件：</dt>-->
<!--      <dd>-->
<!--        <h5>品牌：</h5>-->
<!--        <ul>-->
<!--          <li class="cur"><a href="#">不限</a></li>-->
<!--          <li><a href="#">大众</a></li>-->
<!--          <li><a href="#">宝马</a></li>-->
<!--          <li><a href="#">本田</a></li>-->
<!--          <li><a href="#">现代</a></li>-->
<!--          <li><a href="#">奥迪</a></li>-->
<!--          <li><a href="#">奔驰</a></li>-->
<!--          <li><a href="#">别克</a></li>-->
<!--          <li><a href="#">比亚迪</a></li>-->
<!--          <li><a href="#">保时捷</a></li>-->
<!--          <li><a href="#">宾利</a></li>-->
<!--          <li><a href="#">巴博斯</a></li>-->
<!--          <li><a href="#">丰田</a></li>-->
<!--          <li><a href="#">福特</a></li>-->
<!--          <li><a href="#">法拉利</a></li>-->
<!--        </ul>-->
<!--      </dd>-->
<!--      <dd>-->
<!--        <h5>价格：</h5>-->
<!--        <ul>-->
<!--          <li class="cur"><a href="#">不限</a></li>-->
<!--          <li><a href="#">8万以下</a></li>-->
<!--          <li><a href="#">8-12万</a></li>-->
<!--          <li><a href="#">12-15万</a></li>-->
<!--          <li><a href="#">15-18万</a></li>-->
<!--          <li><a href="#">18-20万</a></li>-->
<!--          <li><a href="#">20-25万</a></li>-->
<!--          <li><a href="#">25-28万</a></li>-->
<!--          <li><a href="#">28-30万</a></li>-->
<!--          <li><a href="#">30-35万</a></li>-->
<!--          <li><a href="#">35-40万</a></li>-->
<!--          <li><a href="#">40万以上</a></li>-->
<!--        </ul>-->
<!--      </dd>-->
<!--    </dl>-->
<!--  </div>-->
  <div class="product-lay">
    <div class="layout">

      <div class="product-list">
        <dl class="orders">
          <dt>排序：</dt>
          <dd><a href="#">销量</a></dd>
          <dd><a href="#">价格</a></dd>
          <dd><a href="#">评价</a></dd>
          <dd><a href="#">上架</a></dd>
        </dl>
        <h2>汽车列表</h2>
        <ul>
          <ProductItem
              v-for="product in products"
              :key="product.id"
              :product-url="product.url"
              :product-image="product.image"
              :product-name="product.name"
              :brand="product.brand"
              :price="product.price"
          />
        </ul>
<!--        <ul>-->
<!--          <li>-->
<!--            <a href="product.html"><img src="/src/assets/img/p1.jpg" /></a>-->
<!--            <h3><a href="product.html">奥迪 奥迪A3 2014款 40TFS</a></h3>-->
<!--            <h4>品牌：<a href="#">奥迪</a></h4>-->
<!--            <p>￥260,000</p>-->
<!--          </li>-->
<!--          <li>-->
<!--            <a href="product.html"><img src="/src/assets/img/p2.jpg" /></a>-->
<!--            <h3><a href="product.html">奥迪 奥迪A3 2014款 40TFS</a></h3>-->
<!--            <h4>品牌：<a href="#">奥迪</a></h4>-->
<!--            <p>￥260,000</p>-->
<!--          </li>-->
<!--          <li>-->
<!--            <a href="product.html"><img src="/src/assets/img/p5.jpg" /></a>-->
<!--            <h3><a href="product.html">奥迪 奥迪A3 2014款 40TFS</a></h3>-->
<!--            <h4>品牌：<a href="#">奥迪</a></h4>-->
<!--            <p>￥260,000</p>-->
<!--          </li>-->
<!--          <li>-->
<!--            <a href="product.html"><img src="/src/assets/img/p6.jpg" /></a>-->
<!--            <h3><a href="product.html">奥迪 奥迪A3 2014款 40TFS</a></h3>-->
<!--            <h4>品牌：<a href="#">奥迪</a></h4>-->
<!--            <p>￥260,000</p>-->
<!--          </li>-->
<!--          <li>-->
<!--            <a href="product.html"><img src="/src/assets/img/p9.jpg" /></a>-->
<!--            <h3><a href="product.html">奥迪 奥迪A3 2014款 40TFS</a></h3>-->
<!--            <h4>品牌：<a href="#">奥迪</a></h4>-->
<!--            <p>￥260,000</p>-->
<!--          </li>-->
<!--          <li>-->
<!--            <a href="product.html"><img src="/src/assets/img/p10.jpg" /></a>-->
<!--            <h3><a href="product.html">奥迪 奥迪A3 2014款 40TFS</a></h3>-->
<!--            <h4>品牌：<a href="#">奥迪</a></h4>-->
<!--            <p>￥260,000</p>-->
<!--          </li>-->
<!--          <li>-->
<!--            <a href="product.html"><img src="/src/assets/img/p11.jpg" /></a>-->
<!--            <h3><a href="product.html">奥迪 奥迪A3 2014款 40TFS</a></h3>-->
<!--            <h4>品牌：<a href="#">奥迪</a></h4>-->
<!--            <p>￥260,000</p>-->
<!--          </li>-->
<!--          <li>-->
<!--            <a href="product.html"><img src="/src/assets/img/p12.jpg" /></a>-->
<!--            <h3><a href="product.html">奥迪 奥迪A3 2014款 40TFS</a></h3>-->
<!--            <h4>品牌：<a href="#">奥迪</a></h4>-->
<!--            <p>￥260,000</p>-->
<!--          </li>-->
<!--          <li>-->
<!--            <a href="product.html"><img src="/src/assets/img/p8.jpg" /></a>-->
<!--            <h3><a href="product.html">奥迪 奥迪A3 2014款 40TFS</a></h3>-->
<!--            <h4>品牌：<a href="#">奥迪</a></h4>-->
<!--            <p>￥260,000</p>-->
<!--          </li>-->
<!--          <li>-->
<!--            <a href="product.html"><img src="/src/assets/img/p7.jpg" /></a>-->
<!--            <h3><a href="product.html">奥迪 奥迪A3 2014款 40TFS</a></h3>-->
<!--            <h4>品牌：<a href="#">奥迪</a></h4>-->
<!--            <p>￥260,000</p>-->
<!--          </li>-->
<!--          <li>-->
<!--            <a href="product.html"><img src="/src/assets/img/p5.jpg" /></a>-->
<!--            <h3><a href="product.html">奥迪 奥迪A3 2014款 40TFS</a></h3>-->
<!--            <h4>品牌：<a href="#">奥迪</a></h4>-->
<!--            <p>￥260,000</p>-->
<!--          </li>-->
<!--          <li>-->
<!--            <a href="product.html"><img src="/src/assets/img/p13.jpg" /></a>-->
<!--            <h3><a href="product.html">奥迪 奥迪A3 2014款 40TFS</a></h3>-->
<!--            <h4>品牌：<a href="#">奥迪</a></h4>-->
<!--            <p>￥260,000</p>-->
<!--          </li>-->
<!--        </ul>-->
      </div>
      <div class="page">
        <el-pagination
            background
            layout="prev, pager, next"
            :total="1000">
        </el-pagination>
      </div>
    </div>
  </div>


</template>

<style scoped>

/*让分页组件居中显示*/
.page {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50px;
}

/*未知原因：全局样式common.css在这里不生效，所以只能重新写*/
* {
  margin: 0;
  padding: 0;
}

li {
  list-style: none;
}

a {
  color: black;
  text-decoration: none;
}

a:hover {
  color: #f64747;
}

h2 {
  font-size: 28px;
}

.layout {
  width: 1200px;
  margin: 0 auto;
}


.bannernav li {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 4px;
  overflow: hidden;
  background: rgba(255, 255, 255, .5);
  margin: 0 6px;
  cursor: pointer;
  /* background-clip: content-box;
  border: 6px solid rgba(0, 0, 0, 0); */
}


#home-catelist h2,
.product-list h2 {
  line-height: 28px;
  padding-left: 16px;
  margin: 40px 0;
  color: #000000;
  border-left: 3px solid #dd3333;
}

#home-catelist ul {
  overflow: hidden;
  border-radius: 16px;
  padding: 32px 88px 0 88px;
  margin-bottom: 32px;
  box-shadow: 0 0 16px #CCCCCC;
}

#home-catelist li {
  float: left;
  width: 78px;
  text-align: center;
  margin: 0 12px;
  margin-bottom: 32px;
}

#home-catelist li img {
  display: block;
  margin-bottom: 16px;
  width: 78px;
  height: 78px;
}

#home-catelist a:hover img {
  box-shadow: 0 0 8px #ccc;
}

.product-lay {
  padding-top: 1px;
  background-color: #f9f9f9;
  padding-bottom:32px;
}
.product-list {
  position: relative;
}
.product-list ul {
  overflow: hidden;
}

.product-list li {
  width: 282px;
  height: 380px;
  background-color: #FFFFFF;
  float: left;
  margin-left: 24px;
  text-align: center;
  color: #000000;
  margin-bottom: 24px;
}
.product-list li:hover{
  box-shadow: 0 0 16px #ccc;
}

.product-list li:nth-child(4n+1) {
  margin-left: 0;
}

.product-list li h3 {
  line-height: 32px;
  font-weight: normal;
}

.product-list li h3 a:hover,
.product-list li h4 a:hover {
  color: #f64747;
}

.product-list li h4 {
  color: #a4a4a4;
  line-height: 24px;
  font-weight: normal;
}

.product-list li h4 a {
  color: #a4a4a4;
}



.product-list p {
  color: #f64747;
  font-size: 16px;
  line-height: 24px;
  font-weight: bold;
}


#cslist a {
  width: 60px;
  display: block;
  margin: 0 auto;
  margin-bottom: 24px;
  padding-top: 68px;
  text-align: center;
}

#cslist a:hover {
  background: #F0F0F0;
}

#cslist a i {
  font-style: normal;
  font-size: 14px;
}


.curpostion {
  margin-top: 40px;
  line-height: 20px;
}

.curpostion span {
  padding: 0 8px;
}


.news p {
  text-indent: 2em;
  margin-bottom: 16px;
}
.news strong{
}
.news span{ color:red;
  font-weight: 600;
}

.news ul,
.news ol {
  padding-left: 18px;
  margin-bottom: 16px;
}

.news ol li {
  list-style: decimal;
}

.news ul li {
  list-style: disc;
}


.newslist li {
  overflow: hidden;
  margin-bottom: 24px;

}


.newslist .date span {
  font-size: 14px;
  display: block;
  border-top: 1px solid #fff;

}


.nitem h3 {
  font-size: 24px;
  line-height: 33px;
  margin-bottom: 8px;
  font-weight: 500;
}

.nitem p {
  font-size: 16px;
  color: #666;
  line-height: 22px;
}

.pagenav {
  margin: 32px 0;
  text-align: right;
  font-size: 16px;
  line-height: 32px;
}

.pagenav a {
  display: inline-block;
  width: 40px;
  margin: 0 2px;
  background: #f77770;
  color: #FFF;
  text-align: center;

}

.pagenav a:hover {
  background-color: #f64747;
  color: white;
}

.orders{
  width:300px;
  line-height: 28px;
  position: absolute;
  right: 0;
  top:8px;
}
.orders dt{
  float: left;
  font-size: 14px;
  color:#333;
  width:60px;
  text-align: left;
}
.orders dd{
  float: left;
}
.orders a{
  margin-left: 8px;
  width:52px;
  display: block;
  background: url(/src/assets/img/arrow_down.png) no-repeat right center;
  text-align: left;
}
.searcharea{
  clear: both;
  margin-bottom: 32px;
}
.searcharea dt{
  padding:0;
  font-size: 22px;
  line-height: 32px;
  text-align: left;
  margin:24px 0;
}
.searcharea dd{
  border-bottom:1px solid #ccc;
  overflow: hidden;
  padding:8px 0;
}
.searcharea h5{
  float: left;
  width:60px;
  font-size: 16px;
  line-height:40px;
}
.searcharea ul{
  float: left;
  width:1132px;
}
.searcharea li{
  float: left;
  margin:8px 0 8px 8px;

}
.searcharea li a{
  display: block;
  padding:0 16px;
  line-height: 24px;
}
.searcharea li a:hover,.searcharea .cur a{
  background-color: #f64747;
  border-radius: 16px;
  color:white;
}

.product-pic li{
  float: left;
  margin-left: 8px;
  cursor: pointer;
}
.product-pic li:first-child{
  margin-left: 0;
}
.product-pic li img{
  width:109px;
  height: 67px;
  border-radius: 8px;
  border:1px solid #ccc;
}
.product-pic li:hover img{
  border:1px solid #f64747;
}
.product-info h1{
  font-size: 28px;
}
.product-info h3{
  margin: 24px 0;
}
.product-info h3 a{
  display:inline-block;
  padding:0 16px;
  line-height: 24px;
  border-radius: 16px;
  font-size: 14px;
  font-weight: 500;
  background-color: #f5f5f5;
  color:#7a7a7a;
}
.product-info h3 a:hover{
  background-color: #f64747;
  color:#fff;
}
.product-info p{
  font-size: 16px;
}
.product-info p label{
  color:#7a7a7a;
}
.product-info p strong{
  color:#f64747;
  font-size: 32px;
  margin-right: 8px;
}

.product-info dl{
  overflow: hidden;
  margin: 16px 0;
}
.product-info dt{
  float: left;
  font-size: 16px;
  color:#7a7a7a;
  line-height: 24px;
}
.product-info dd{
  float: left;
  margin: 0 8px;
}
.product-info dd a{
  display: block;
  padding:0 16px;
  line-height: 24px;
  border-radius: 16px;
  font-size: 14px;
  border:1px solid #ebebeb;
}
.product-info .cur a{
  background-color: #f64747;
  color:#fff;
}

.cartopt .numopt input{
  float: left;
  text-align:center;
  line-height: 60px;
  width:48px;
  height: 60px;
  border: none;
}
.cartopt .numopt p{
  float: left;
  width:30px;
}
.cartopt .numopt a{
  display: block;
  background-color: #f5f5f5;
  text-align: center;
  line-height: 30px;
  border-bottom: 1px solid #ebebeb;

}
.cartopt .numopt a:last-child{
  border-bottom:none;
}


.loginform form{
  padding: 0 64px 32px 64px;
}
.loginform p{
  color:#666;
}
.loginform p span{
  display: none;
  line-height:40px;
  color:#666;
}
.loginform h2{
  line-height: 28px;
  font-size: 22px;
  color:#f64747;
  padding:48px 0;
  text-align: center;
}
.loginform h2 span{
  margin-right: 8px;
}
.loginform h2 a{
  color:#000;
  margin-left: 8px;
}
.loginform p{
  margin-bottom: 32px;
}
.loginform p label{
  width:32px;
  height: 32px;
  text-indent: -9999px;
  background:#f5f5f5;
  display:inline-block;
}

.loginform p a{
  color:#f64747;
  font-weight: 600;
}

.messageform p{
  margin-bottom: 24px;
}
.messageform p label:first-child{
  display: inline-block;
  width:80px;
  height: 34px;
  line-height: 34px;
  text-align: left;
}

.message-list li{
  border-bottom: 1px solid #ebebeb;
  padding-bottom: 16px;
  margin-bottom: 16px;
  overflow: hidden;
}

.mcontent h3{
  font-size: 16px;
  color:#666;
  line-height: 32px;
  font-weight: 500;
}
.mcontent h3 span{
  margin-left: 16px;
}
.mcontent h3 label{
  float: right;
}
.mcontent h4{
  font-size: 18px;
  line-height: 48px;
}

#cart table{
  margin: 32px 0;
  width:100%;
  border-collapse: collapse;
  font-size: 16px;
}
#cart table thead,#cart table tfoot{
  background-color: #f5f5f5;
}
#cart table td,#cart table th{
  padding:16px 0;
  text-align: center;
}
#cart table td img{
  width:100px;
}
#cart table tr{
  border-bottom:1px solid #ccc;
}

#cart .numopt input{
  text-align:center;
  line-height: 60px;
  width:48px;
  height: 30px;
  border: none;
}
#cart .numopt a{
  display: inline-block;
  width:30px;
  height: 30px;
  line-height: 30px;
  background-color: #f5f5f5;
}

</style>
